<script setup>
	import {
		ref
	} from 'vue';
	import {
		apiGetClassList,
		apiGetHistoryList
	} from "@/api/apis.js"
	import {
		gotoHome
	} from "@/utils/common.js"
	import {
		onLoad,
		onReachBottom,
		onShareAppMessage,
		onShareTimeline,
		onUnload,
		onPullDownRefresh
	} from "@dcloudio/uni-app"

	//分类列表数据
	const classList = ref([]);
	const noData = ref(false)

	//定义data参数
	const queryParams = {
		// 默认第一页
		pageNum: 1,
		// 默认一页12个
		pageSize: 12
	}
	let pageName;

	//获取id
	onLoad((e) => {
		// 解构对象
		let {
			id = null, name = null, type = null
		} = e;
		// if (!id) gotoHome()
		// 如果是我的评分/下载，赋值
		if (type) queryParams.type = type;
		//如果是分类壁纸，赋值
		if (id) queryParams.classid = id;

		pageName = name
		//修改导航标题
		uni.setNavigationBarTitle({
			title: name
		})
		//执行获取分类列表方法，在onLoad中执行，不会忽略onLoad
		getClassList();
	})
	// 触底加载
	onReachBottom(() => {
		// 判断noData
		if (noData.value) return;
		// 下一页
		queryParams.pageNum++;
		getClassList();
	})


	//下拉刷新
	onPullDownRefresh(() => {
		// 重置页码和数据
		queryParams.pageNum = 1;
		classList.value = [];
		noData.value = false;
		// 重新加载数据
		getClassList().then(() => {
			// 数据加载完成后显示成功提示
			uni.showToast({
				title: "刷新成功",
				icon: "none"
			});
		}).catch(() => {
			// 出错时显示失败提示
			uni.showToast({
				title: "刷新失败",
				icon: "none"
			});
		});
	})

	//获取分类列表or历史列表网络数据
	const getClassList = async () => {
		let res;
		if (queryParams.classid) res = await apiGetClassList(queryParams);
		if (queryParams.type) res = await apiGetHistoryList(queryParams);
		// 新数据+老数据
		classList.value = [...classList.value, ...res.data];
		// 判断数据是否小于固定值
		if (queryParams.pageSize > res.data.length) noData.value = true;
		uni.setStorageSync("storgClassList", classList.value);
		// 停止下拉刷新动画
		uni.stopPullDownRefresh()
	}
	//分享给好友
	onShareAppMessage((e) => {
		return {
			title: "壁纸-" + pageName,
			//需要传递ID
			path: "/pages/classlist/classlist?id=" + queryParams.classid + "&name=" + pageName
		}
	})
	//分享朋友圈
	onShareTimeline(() => {
		return {
			title: "壁纸-" + pageName,
			query: "id=" + queryParams.classid + "&name=" + pageName
		}
	})
	// 清除缓存数据
	onUnload(() => {
		uni.removeStorageSync("storgClassList")
	})
</script>
<template>
	<view class="classlist">

		<view class="loadingLayout" v-if="!classList.length && !noData">
			<uni-load-more status="loading"></uni-load-more>
		</view>

		<view class="content">
			<navigator :url="'/pages/preview/preview?id='+item._id" class="item" v-for="item in classList"
				:key="item._id">
				<image :src="item.smallPicurl" mode="aspectFill"></image>
			</navigator>
		</view>

		<view class="loadingLayout" v-if="classList.length || noData">
			<uni-load-more :status="noData?'noMore':'loading'"></uni-load-more>
		</view>

		<view class="safe-area-inset-bottom"></view>
	</view>
</template>
<style lang="scss" scoped>
	.classlist {
		.content {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 5rpx;

			padding: 5rpx;

			.item {
				height: 440rpx;

				image {
					width: 100%;
					height: 100%;
					display: block;
				}
			}
		}
	}
</style>